<template>
  <div class="page-information">
    <MovieHeader />
    <div class="switch-tab-bar">
      <van-tabs
        color="#f03d37"
        line-width="20px"
        :ellipsis="false"
        @click="tabHandler"
      >
        <van-tab
          title-style="color:#666"
          :key="item.id"
          v-for="item in tabsArr"
          :title="item.name"
        >
        </van-tab>
      </van-tabs>
    </div>
    <section class="information">
      <div class="information-wrap">
        <div style="text-align: center" v-show="scroll_down">下拉释放刷新</div>
        <div
          class="information-item"
          v-for="item in informationArr"
          :key="item.id"
        >
          <div class="information-item-left">
            <h2>{{ item.title }}</h2>
            <p>{{ item.introduction }}</p>
            <span>{{ item.type + "  " }}{{ item.actor }}</span>
          </div>
          <a href="javascript:void(0)" class="information-item-right">
            <img :src="item.images" :alt="item.title" />
          </a>
        </div>
      </div>
    </section>
    <MovieBodyFooter />
  </div>
</template>
<script>
import MovieBodyFooter from "@/components/movie/movie_body_footer";
import MovieHeader from "@/components/movie/movie_herder";
import Vue from "vue";
import { Tab, Tabs } from "vant";
import BScroll from "@better-scroll/core";
import http from "../../utils/htttp";
Vue.use(Tab).use(Tabs);
export default {
  components: {
    MovieBodyFooter,
    MovieHeader,
  },
  data() {
    return {
      tabsArr: [
        {
          id: 0,
          name: "推荐",
          path: "/",
        },
        {
          id: 1000,
          name: "最新",
          path: "/",
        },
        {
          id: 1001,
          name: "热门",
          path: "/",
        },
        {
          id: 1002,
          name: "八卦",
          path: "/",
        },
        {
          id: 1003,
          name: "访谈",
          path: "/",
        },
      ],
      informationId: 0,
      informationArr: [],
      bs: null,
      scroll_down: false,
    };
  },
  async mounted() {
    let {
      data: { informations },
    } = await this.getInformation();
    this.informationArr = informations;
    this.$nextTick(() => {
      this.bs = new BScroll(".information", {
        probeType: 3,
      });
      this.bs.on('scroll',(props)=>{
          let {y} = props
          if(y>30){
              this.scroll_down = true
          }else{
              this.scroll_down = false
          }
      })
      this.bs.on("touchEnd", async (props) => {
        let { y } = props;
        if (y > 30) {
          let {
            data: { informations },
          } = await this.getInformation();
          this.informationArr = informations;
        }
      });
    });
  },

  methods: {
    getInformation() {
      return http("/information", {
        params: {
          informationId: this.informationId,
        },
      });
    },
    async tabHandler(index) {
      this.informationId = this.tabsArr[index].id;
      let {
        data: { informations },
      } = await this.getInformation();
      this.informationArr = informations;
    },
  },
};
</script>
<style scoped>
.page-information {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.page-information .information {
  padding-bottom: 0.96rem;
  /* background-color: #f5f5f5; */
  background-color: #fff;
  overflow: hidden;
  flex: 1;
}

.page-information .information .information-item {
  margin-bottom: 0.12rem;
  position: relative;
  height: 120px;
  /* background: antiquewhite; */
}
.information-item {
  display: flex;
  padding: 10px;
}
.information-item-left {
  flex: 1;

  display: flex;
  flex-direction: column;
}
.information-item-left h2 {
  font-size: 0.3rem;
  color: #555;
  margin: 0;

  padding: 0;
}
.information-item-left p {
  margin: 0;
  padding: 0;
  margin: 4px 0;
}
/* .information-item-left span,
.information-item-left p,
.information-item-left h2 {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
} */
.information-item-right {
  border-radius: 10px;
  overflow: hidden;
  width: 118px;
  height: 118px;
}
.information-item-righ img {
  width: 100%;
  height: 100%;
}
</style>
<style >
.page-information-body {
  overflow: auto;
}
.page-information .van-tab__text {
  font-size: 0.3rem;
}
.page-information .van-tabs__nav--line {
  padding-bottom: 12px;
}
.page-information .van-tab--active {
  font-weight: 700;
  color: #333 !important;
}
.page-information .van-tab--active .van-tab__text {
  font-size: 0.34rem !important;
}
</style>